<template>
  <div id="app" style="height:100%">
    <router-view ></router-view>
    <div>
      <tabbar class="tabber" v-show="menu.indexOf(this.$route.name) > -1">
        <tabbar-item :selected="this.$route.name === 'home' || this.$route.name === ''" link="/home" >
          <img slot="icon" src="./assets/home.png">
          <img slot="icon-active" src="./assets/home_fill.png">
          <span slot="label">首页</span>
        </tabbar-item>
        <tabbar-item :selected="this.$route.name == 'contact'" link="/contact">
          <img slot="icon" src="./assets/contact.png">
          <img slot="icon-active" src="./assets/contact_fill.png">
          <span slot="label">联系我们</span>
        </tabbar-item>
        <tabbar-item :selected="this.$route.name == 'subscribe'" link="/subscribe">
          <img slot="icon" src="./assets/subscribe.png">
          <img slot="icon-active" src="./assets/subscribe_fill.png">
          <span slot="label">预约报价</span>
        </tabbar-item>
        <tabbar-item :selected="this.$route.name == 'user'" link="/user">
          <img slot="icon" src="./assets/user.png">
          <img slot="icon-active" src="./assets/user_fill.png">
          <span slot="label">个人中心</span>
        </tabbar-item>
      </tabbar>
    </div>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'
export default {
  name: 'app',
  components: {
    Tabbar,
    TabbarItem
  },
  data () {
    return {
      menu: [
        'home',
        'contact',
        'subscribe',
        'user'
      ]
    }
  }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';

body {
  background-color: #f8f8fa;
}

.tabber {
  position: fixed !important;
  z-index: 502 !important;
  background-color: #fff!important;
  box-shadow: 0 -5px 15px #eee;
  border: none;
  .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
  .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i,
  .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
    color: #f9c270;
  }
  .weui-tabbar__icon {
    display: inline-block;
    width: 20px;
    height: 20px;
  }
  .weui-tabbar__label {
    font-size: 12px;
    line-height: 2;
    color: #3d414a;
  }
}
.fle-v-center {
  display: -webkit-flex;
  display: flex;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}
.fle .cell,.fle-v-center .cell {
  flex: 1;
  -webkit-flex: 1;
}
.fle{
  display: -webkit-flex;
  display: flex;
}
.fle-column{
  display: flex;
  flex-direction: column;
}
</style>
